A React titkos receptje: Mélymerülés a Reconciliation algoritmusba és a virtuális DOM összehasonlításába

` így reprezentálható:

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

Mivel ezek csak JavaScript objektumok, létrehozásuk és manipulálásuk hihetetlenül gyors. Nem igényel semmilyen interakciót a böngésző API-kkal, így nincsenek újratördelések vagy újrafestések.

Hogyan működik a virtuális DOM?

A VDOM lehetővé teszi a deklaratív megközelítést a felhasználói felület fejlesztésében. Ahelyett, hogy lépésről lépésre megmondanád a böngészőnek, hogyan változtassa meg a DOM-ot (imperatív), egyszerűen csak deklarálod, hogy milyennek kell kinéznie a felhasználói felületnek egy adott állapotban (deklaratív). A React elintézi a többit.

A folyamat a következőképpen néz ki:

1. Kezdeti renderelés: Amikor az alkalmazásod először betöltődik, a React létrehoz egy teljes virtuális DOM-fát a felhasználói felületedhez, és ezt használja a kezdeti valódi DOM generálására.
2. Állapotfrissítés: Amikor az alkalmazás állapota megváltozik (pl. egy felhasználó egy gombra kattint), a React létrehoz egy új virtuális DOM-fát, amely az új állapotot tükrözi.
3. Összehasonlítás (Diffing): A React-nek most két virtuális DOM-fája van a memóriában: a régi (az állapotváltozás előtti) és az új. Ezután lefuttatja a „diffing” algoritmusát, hogy összehasonlítsa ezt a két fát, és azonosítsa a pontos különbségeket.
4. Kötegelés és frissítés: A React kiszámítja a leghatékonyabb és legminimálisabb műveletkészletet, amely szükséges a valódi DOM frissítéséhez, hogy az megegyezzen az új virtuális DOM-mal. Ezeket a műveleteket kötegelve, egyetlen, optimalizált sorozatban alkalmazza a valódi DOM-on.

A frissítések kötegelésével a React minimalizálja a lassú DOM-mal való közvetlen interakciót, jelentősen javítva a teljesítményt. Ennek a hatékonyságnak a lényege az „összehasonlítás” (diffing) lépésben rejlik, amelyet formálisan Reconciliation algoritmusnak neveznek.

A React szíve: A Reconciliation algoritmus

A Reconciliation az a folyamat, amelyen keresztül a React frissíti a DOM-ot, hogy az megfeleljen a legújabb komponensfának. Az algoritmust, amely ezt az összehasonlítást végzi, „diffing algoritmusnak” nevezzük.

Elméletileg egy fa átalakításához szükséges minimális transzformációk megtalálása egy nagyon összetett probléma, amelynek algoritmus-komplexitása O(n³) nagyságrendű, ahol n a fa csomópontjainak száma. Ez túl lassú lenne a valós alkalmazásokhoz. Ennek megoldására a React csapata briliáns megfigyeléseket tett arról, hogyan viselkednek általában a webalkalmazások, és egy heurisztikus algoritmust implementáltak, ami sokkal gyorsabb – O(n) idő alatt működik.

A heurisztikák: A gyors és kiszámítható összehasonlítás

A React összehasonlító algoritmusa két elsődleges feltételezésre, vagyis heurisztikára épül:

1. heurisztika: A különböző típusú elemek különböző fákat eredményeznek

Ez az első és legegyértelműbb szabály. Két VDOM csomópont összehasonlításakor a React először a típusukat vizsgálja. Ha a gyökérelemek típusa eltérő, a React feltételezi, hogy a fejlesztő nem akarja megpróbálni az egyiket a másikká alakítani. Ehelyett egy drasztikusabb, de kiszámíthatóbb megközelítést alkalmaz:

• Lebontja a teljes régi fát, eltávolítva (unmounting) az összes régi komponenst és megsemmisítve az állapotukat.
• Teljesen új fát épít fel az alapoktól az új elem típusa alapján.

Például, vegyük ezt a változást:

Előtte: <div><Counter /></div>
Utána: <span><Counter /></span>

Annak ellenére, hogy a gyermek `Counter` komponens ugyanaz, a React látja, hogy a gyökér `div`-ről `span`-re változott. Teljesen eltávolítja a régi `div`-et és a benne lévő `Counter` példányt (elveszítve annak állapotát), majd csatol egy új `span`-t és egy vadonatúj `Counter` példányt.

Kulcsfontosságú tanulság: Kerüld a komponens-alfa gyökérelem-típusának megváltoztatását, ha meg akarod őrizni az állapotát, vagy el akarod kerülni az adott alfa teljes újrarenderelését.

2. heurisztika: A fejlesztők a `key` prop segítségével jelezhetik a stabil elemeket

Ez vitathatatlanul a legkritikusabb heurisztika, amelyet a fejlesztőknek meg kell érteniük és helyesen kell alkalmazniuk. Amikor a React egy gyermekelem-listát hasonlít össze, alapértelmezett viselkedése az, hogy egyszerre iterál végig mindkét listán, és ahol különbséget talál, ott mutációt generál.

A probléma az index alapú összehasonlítással

Képzeljük el, hogy van egy listánk, és egy új elemet adunk a lista elejére kulcsok használata nélkül.

Kezdeti lista:

• B elem
• C elem

Frissített lista ('A elem' hozzáadása az elejére):

• A elem
• B elem
• C elem

Kulcsok nélkül a React egy egyszerű, index alapú összehasonlítást végez:

1. Összehasonlítja a régi 0. indexű elemet ('B elem') az új 0. indexű elemmel ('A elem'). Különböznek, ezért mutálja az első elemet.
2. Összehasonlítja a régi 1. indexű elemet ('C elem') az új 1. indexű elemmel ('B elem'). Különböznek, ezért mutálja a második elemet.
3. Látja, hogy van egy új elem a 2. indexen ('C elem'), és beilleszti azt.

Ez rendkívül nem hatékony. A React két felesleges mutációt és egy beillesztést hajtott végre, miközben csupán egyetlen beillesztésre lett volna szükség az elején. Ha ezek a listaelemek összetett, saját állapottal rendelkező komponensek lennének, ez komoly teljesítményproblémákhoz és hibákhoz vezethetne, mivel az állapotok összekeveredhetnének a komponensek között.

A `key` prop ereje

A `key` prop megoldást nyújt. Ez egy speciális string attribútum, amelyet meg kell adnod, amikor elemlistákat hozol létre. A kulcsok stabil identitást adnak minden elemnek a React számára.

Nézzük meg újra ugyanezt a példát, de ezúttal stabil, egyedi kulcsokkal:

Kezdeti lista:

• B elem
• C elem

Frissített lista:

• A elem
• B elem
• C elem

Most a React összehasonlítási folyamata sokkal okosabb:

1. A React megnézi az új lista gyermekeit, és megtalálja a 'b' és 'c' kulcsú elemeket.
2. Tudja, hogy a 'b' és 'c' kulcsú elemek már léteznek a régi listában, ezért egyszerűen áthelyezi őket.
3. Látja, hogy van egy új, 'a' kulcsú elem, amely korábban nem létezett, ezért létrehozza és beilleszti azt.

Ez sokkal hatékonyabb. A React helyesen azonosítja, hogy csak egyetlen beillesztést kell végrehajtania. A 'b' és 'c' kulcsokhoz tartozó komponensek megmaradnak, megőrizve belső állapotukat.

Kritikus szabály a kulcsokra vonatkozóan: A kulcsoknak stabilnak, kiszámíthatónak és egyedinek kell lenniük a testvéreik között. A tömb indexének használata kulcsként (`items.map((item, index) =>

...

)`) egy anti-pattern, ha a lista valaha is újrarendezhető, szűrhető, vagy elemeket adnak hozzá/távolítanak el a közepéről, mivel ez ugyanazokhoz a problémákhoz vezet, mintha egyáltalán nem lenne kulcs. A legjobb kulcsok az adatokból származó egyedi azonosítók, mint például egy adatbázis ID.

A fejlődés: A Stack-től a Fiber architektúráig

A fent leírt reconciliation algoritmus volt a React alapja sok éven át. Azonban volt egy jelentős korlátja: szinkron és blokkoló volt. Ezt az eredeti implementációt ma már Stack Reconciler-nek nevezik.

A régi módszer: A Stack Reconciler

A Stack Reconcilerben, amikor egy állapotfrissítés újrarenderelést váltott ki, a React rekurzívan bejárta a teljes komponensfát, kiszámolta a változásokat, és alkalmazta őket a DOM-on – mindezt egyetlen, megszakítás nélküli sorozatban. Kisebb frissítéseknél ez rendben volt. De nagy komponensfák esetében ez a folyamat jelentős időt vehetett igénybe (pl. több mint 16 ms), blokkolva a böngésző fő szálát. Ez a felhasználói felület reszponzivitásának elvesztéséhez, képkockák eldobásához, akadozó animációkhoz és rossz felhasználói élményhez vezetett.

Bemutatkozik a React Fiber (React 16+)

Ennek a problémának a megoldására a React csapata egy többéves projektbe kezdett, hogy teljesen újraírja a központi reconciliation algoritmust. Az eredmény, amelyet a React 16-ban adtak ki, a React Fiber nevet kapta.

A Fiber architektúrát az alapoktól úgy tervezték, hogy lehetővé tegye a párhuzamosságot (concurrency) – azt a képességet, hogy a React egyszerre több feladaton is dolgozhasson, és prioritás alapján váltson közöttük.

A „fiber” egy egyszerű JavaScript objektum, amely egy munkaegységet képvisel. Információkat tartalmaz egy komponensről, annak bemenetéről (props) és kimenetéről (children). Ahelyett, hogy egy rekurzív bejárást végezne, amelyet nem lehet megszakítani, a React most egy láncolt listát dolgoz fel a fiber csomópontokból, egyenként.

Ez az új architektúra számos kulcsfontosságú képességet tett elérhetővé:

• Inkrementális renderelés: A renderelési munkát kis darabokra bonthatja, és több képkockára oszthatja szét.
• Prioritizálás: Különböző prioritási szinteket rendelhet a különböző típusú frissítésekhez. Például egy beviteli mezőbe gépelő felhasználó magasabb prioritást élvez, mint a háttérben lekérdezett adatok.
• Szüneteltethetőség és megszakíthatóság: Képes szüneteltetni egy alacsony prioritású frissítésen végzett munkát egy magas prioritású kezelése érdekében, sőt, akár meg is szakíthatja vagy újrahasznosíthatja a már nem szükséges munkát.

A Fiber két fázisa

A Fiber alatt a renderelési folyamat két különálló fázisra oszlik:

1. A renderelési/reconciliation fázis (aszinkron): Ebben a fázisban a React feldolgozza a fiber csomópontokat, hogy felépítsen egy „folyamatban lévő” (work-in-progress) fát. Meghívja a komponensek `render` metódusait, és futtatja az összehasonlító algoritmust, hogy meghatározza, milyen változtatásokat kell végrehajtani a DOM-on. Kulcsfontosságú, hogy ez a fázis megszakítható. A React szüneteltetheti ezt a munkát, hogy valami fontosabbat kezeljen, és később folytathatja. Mivel megszakítható, a React ebben a fázisban nem alkalmaz tényleges DOM-változtatásokat, hogy elkerülje az inkonzisztens felhasználói felület állapotát.
2. A commit fázis (szinkron): Amint a „folyamatban lévő” fa elkészül, a React belép a commit fázisba. Veszi a kiszámított változásokat, és alkalmazza őket a valódi DOM-on. Ez a fázis szinkron és nem szakítható meg. Ez biztosítja, hogy a felhasználó mindig egy konzisztens felhasználói felületet lásson. Az életciklus-metódusok, mint a `componentDidMount` és a `componentDidUpdate`, valamint a `useLayoutEffect` és `useEffect` hookok ebben a fázisban futnak le.

A Fiber architektúra az alapja a React számos modern funkciójának, beleértve a `Suspense`-t, a concurrent renderinget, a `useTransition`-t és a `useDeferredValue`-t, amelyek mind segítik a fejlesztőket abban, hogy reszponzívabb és gördülékenyebb felhasználói felületeket építsenek.

Gyakorlati optimalizálási stratégiák fejlesztőknek

A React reconciliation folyamatának megértése képessé tesz arra, hogy teljesítmény-orientáltabb kódot írj. Íme néhány gyakorlati stratégia:

1. Mindig használj stabil és egyedi kulcsokat a listákhoz

Ezt nem lehet elégszer hangsúlyozni. Ez a listák legfontosabb optimalizálási lehetősége. Használj egyedi azonosítót az adataidból (pl. `product.id`). Kerüld a tömbindexek használatát, hacsak a lista nem teljesen statikus és soha nem fog változni.

2. Kerüld a felesleges újrarendereléseket

Egy komponens újrarenderelődik, ha az állapota megváltozik, vagy ha a szülője újrarenderelődik. Néha egy komponens akkor is újrarenderelődik, ha a kimenete azonos lenne. Ezt megakadályozhatod a következőkkel:

• `React.memo()`: Egy magasabb rendű komponens (higher-order component) funkcionális komponensekhez. Sekély (shallow) összehasonlítást végez a komponens props-ain. Ha a props-ok nem változtak, a React kihagyja a komponens újrarenderelését, és újra felhasználja az utoljára renderelt eredményt.
• `useCallback()`: A komponensen belül definiált függvények minden rendereléskor újra létrejönnek. Ha ezeket a függvényeket props-ként adod át egy `React.memo`-ba csomagolt gyermekkomponensnek, a gyermek újra fog renderelődni, mert a függvény prop technikailag minden alkalommal egy új függvény. A `useCallback` magát a függvényt memoizálja, biztosítva, hogy csak akkor jöjjön létre újra, ha a függőségei megváltoznak.
• `useMemo()`: Hasonló a `useCallback`-hez, de értékekre vonatkozik. Memoizálja egy költséges számítás eredményét. A számítás csak akkor fut le újra, ha valamelyik függősége megváltozott. Ez hasznos a költséges számítások minden rendereléskor történő elkerülésére, valamint a props-ként átadott stabil objektum/tömb referenciák fenntartására.

3. Okos komponens-összeállítás

A komponensek strukturálásának módja jelentős hatással lehet a teljesítményre. Ha a komponens állapotának egy része gyakran frissül, próbáld meg elszigetelni azoktól a részektől, amelyek nem.

Például, ahelyett, hogy egyetlen nagy komponensed lenne, ahol egy gyakran változó beviteli mező az egész komponenst újrarendereli, emeld ki ezt az állapotot egy saját, kisebb komponensbe. Így csak a kis komponens renderelődik újra, amikor a felhasználó gépel.

4. Virtualizáld a hosszú listákat

Ha több száz vagy ezer elemből álló listákat kell renderelned, még megfelelő kulcsokkal is, az összes elem egyszerre történő renderelése lassú lehet és sok memóriát fogyaszthat. A megoldás a virtualizáció vagy „ablakozás” (windowing). Ez a technika azt jelenti, hogy csak az elemeknek azt a kis részhalmazát rendereljük, amelyik éppen látható a nézetablakban (viewport). Ahogy a felhasználó görget, a régi elemeket eltávolítjuk (unmount), és az újakat csatoljuk (mount). Az olyan könyvtárak, mint a `react-window` és a `react-virtualized`, hatékony és könnyen használható komponenseket biztosítanak ennek a mintának a megvalósításához.

Konklúzió

A React teljesítménye nem véletlen; ez egy tudatos és kifinomult architektúra eredménye, amely a virtuális DOM és egy hatékony Reconciliation algoritmus köré épül. A közvetlen DOM-manipulációtól való elvonatkoztatással a React olyan módon tudja kötegelni és optimalizálni a frissítéseket, amit manuálisan hihetetlenül bonyolult lenne kezelni.

Fejlesztőként mi is kulcsfontosságú részei vagyunk ennek a folyamatnak. Az összehasonlító algoritmus heurisztikáinak megértésével – a kulcsok helyes használatával, a komponensek és értékek memoizálásával, valamint az alkalmazásaink átgondolt strukturálásával – együtt tudunk működni a React reconcilerével, nem pedig ellene. A Fiber architektúrára való áttérés tovább tágította a lehetőségek határait, lehetővé téve a gördülékeny és reszponzív felhasználói felületek új generációját.

Amikor legközelebb azt látod, hogy a felhasználói felületed azonnal frissül egy állapotváltozás után, szánj egy pillanatot arra, hogy értékeld a virtuális DOM, az összehasonlító algoritmus és a commit fázis elegáns táncát, ami a motorháztető alatt zajlik. Ez a megértés a kulcsod ahhoz, hogy gyorsabb, hatékonyabb és robusztusabb React alkalmazásokat építs egy globális közönség számára.